<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
	<title>文件下载目录</title>
</head>
<body style="background-color: #ffccff">
<div class="container">
		<div class="row">
			<!--栅格在大屏幕时分成四份，中分成三份，小分成两份，最多12个分-->
			<div class="col-md-3 col-sm-4 col-xs-6">
				<!--用thumbnail进行缩略显示-->
				<div class="thumbnail">
					<img src="image/01.png">
					<!--在图片上的文字-->
					<div class="caption">
						<h3>常用前端插件库</h3>
						<p>本示例博客用到的插件，还有许多，自己发现去吧！</p>
						<p><a href="javascript:;" id="down_01" class="btn btn-success">单击下载</a></p>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="image/02.png">
					<div class="caption">
						<h3>一些总结小文档</h3>
						<p>如上图，里面包含这些文档，有需要下载</p>
						<p><a href="javascript:;" id="down_02" class="btn btn-warning">下载文档</a></p>
					</div>					
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="image/03.png">
					<div class="caption">
						<h3>CKeditor富文本编辑器</h3>
						<p>一个所见即所得的富文本编辑器，小巧功能完善，可以轻松的插入在你想要的网页中！V4.6.2</p>
						<p><a href="javascript:;" id="down_03" class="btn btn-info">下载CKeditor</a>&nbsp;
						<a href="https://www.cnblogs.com/Tirisfal/p/5548424.html" target="_blank" class="btn btn-success">博客园介绍</a></p>
					</div>				
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="image/04.png">
					<div class="caption">
						<h3>bootstrap日期时间选择器</h3>
						<p>bootstrap的组件之日期时间选择器，使用bootstrap布局，整体风格一致！</p>
						<p><a href="javascript:;" id="down_04" class="btn btn-info">单击下载</a></p>
					</div>			
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="thumbnail">
					<img src="image/05.png">
					<div class="caption">
						<h3>bootstrap文件上传</h3>
						<p>bootstrap的组件之fileupload，一个超赞的现代H5上传组件！</p>
						<p><a href="javascript:;" id="down_05" class="btn btn-success">单击下载</a></p>
					</div>			
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
$("#down_01").click(function(){
	window.open("plugin.zip");
});
$("#down_02").click(function(){
	window.open("doc.zip");
});
$("#down_03").click(function(){
	window.open("ckeditor_4.6.2_full.zip");
});
$("#down_04").click(function(){
	window.open("bootstrap-datetimepicker-master.zip");
});
$("#down_05").click(function(){
	window.open("bootstrap-fileinput-master.zip");
});
</script>
</body>
</html>